<template>
    <view class="popup-rp">
        <cl-popup direction="center" :force-update="false" :visible.sync="show" @close="close">
            <view class="popup-rp--wait" v-if="!isTake">
                <image class="popup-rp__cover" src="/static/images/red-package/wait.png" />

                <button
                    :class="[
                        'popup-rp__grab',
                        `s-${animate}`,
                        {
                            'is-animate': animate == 1
                        }
                    ]"
                    open-type="getUserInfo"
                    @tap="openRedPackage()"
                    @getuserinfo="onGetUserInfo"
                >
                    <image class="d-1" src="/static/images/red-package/open/1.png" />
                    <image class="d-2" src="/static/images/red-package/open/2.png" />
                    <image class="d-3" src="/static/images/red-package/open/3.png" />
                    <image class="d-4" src="/static/images/red-package/open/4.png" />
                    <image class="d-5" src="/static/images/red-package/open/5.png" />
                    <image class="d-6" src="/static/images/red-package/open/6.png" />
                    <image class="d-7" src="/static/images/red-package/open/7.png" />
                    <image class="d-8" src="/static/images/red-package/open/8.png" />
                    <image class="d-9" src="/static/images/red-package/open/9.png" />
                    <image class="d-10" src="/static/images/red-package/open/10.png" />
                    <image class="d-11" src="/static/images/red-package/open/11.png" />
                </button>

                <!-- 小红包 -->
                <view class="popup-rp__small">
                    <image class="d1" src="/static/images/red-package/d1.png" />
                    <image class="d2" src="/static/images/red-package/d2.png" />
                    <image class="d3" src="/static/images/red-package/d3.png" />
                    <image class="d4" src="/static/images/red-package/d4.png" />
                </view>

                <view class="popup-rp__z" v-if="conf.popText">
                    <text>{{ conf.popText || '微信用户专属' }}</text>
                </view>
            </view>

            <view class="popup-rp--open" v-else>
                <image class="popup-rp__cover" src="/static/images/red-package/open.png" />
                <image class="popup-rp__cover-bg" src="/static/images/red-package/open-b.png" />

                <view class="popup-rp__light">
                    <image src="/static/images/red-package/light.png" />
                </view>

                <view class="popup-rp__price">
                    <text>￥{{ amount || 0 }}</text>
                </view>

                <view class="popup-rp__date">
                    <text>红包将在</text>
                    <cl-countdown
                        :splitor="[':', ':', ':']"
                        :layout="['hour', 'minute', 'second']"
                        :datetime="endTime"
                        is-millisecond
                    ></cl-countdown>
                    <text>后清零</text>
                </view>

                <button class="popup-rp__next" @tap="close">
                    <image src="/static/images/use-btn.png" />
                    <text>拿去花</text>
                </button>
            </view>
        </cl-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import Buy from '@/mixins/buy';

export default {
    data() {
        return {
            amount: '',
            show: false,
            isTake: false,
            animate: 1,
            isShare: false,
            timer: null
        };
    },
    mixins: [Buy],
    computed: {
        ...mapGetters(['userInfo', 'conf', 'app', 'channelId', 'pId', 'token']),

        endTime() {
            return moment()
                .add(this.conf.countDownTime || '60', 'minute')
                .format('YYYY-MM-DD  HH:mm:ss');
        }
    },
    methods: {
        open(isShare) {
            if (isShare) {
                if (this.userInfo.todayShareNum >= this.conf.shareNum) {
                    return false;
                }
            }

            this.isShare = isShare;
            this.show = true;
        },

        close() {
            this.show = false;
            this.stop();

            setTimeout(() => {
                this.isTake = false;
                this.isShare = false;
                this.amount = '';
                this.animate = 1;
            }, 300);
        },

        stop() {
            clearInterval(this.timer);
        },

        take() {
            const open = () => {
                this.timer = setInterval(() => {
                    this.animate += 1;

                    if (this.animate == 12) {
                        this.animate = 1;
                    }
                }, 100);

                const next = () => {
                    this.$service.wxjlj
                        .getSubsidiesAmount({
                            type: this.isShare ? 1 : 0
                        })
                        .then(res => {
                            this.stop();
                            this.isTake = true;
                            this.amount = res || 0;
                            this.$store.dispatch('getUserInfo');

                            if (!this.isShare) {
                                this.$store.dispatch('getConf');
                                this.$emit('refresh');
                            }
                        })
                        .catch(err => {
                            this.close();
                            uni.showToast({
                                title: err,
                                icon: 'none'
                            });

                            this.$emit('refresh');
                        });
                };

                setTimeout(() => {
                    if (this.isShare) {
                        next();
                    } else {
                        uni.login({
                            provider: 'weixin',
                            success: loginRes => {
                                let code = loginRes.code;
                                uni.getUserInfo({
                                    provider: 'weixin',
                                    success: info => {
                                        this.$service.wechatApplet
                                            .login({
                                                appId: 'wx454ba8818fbf2557',
                                                code,
                                                encryptedData: info.encryptedData,
                                                iv: info.iv
                                            })
                                            .then(res => {
                                                this.$store.commit('SET_TOKEN', res.token);

                                                this.$store.dispatch('getUserInfo').then(() => {
                                                    this.$store.dispatch('addVisitRecord');
                                                });

                                                next();
                                            })
                                            .catch(err => {
                                                this.stop();
                                                uni.showToast({
                                                    title: err,
                                                    icon: 'none'
                                                });
                                            });
                                    }
                                });
                            }
                        });
                    }
                }, 300);
            };

            const isGrab = uni.getStorageSync('subscribe-message__grab-btn');

            if (isGrab) {
                this.subscribeMessage().then(() => {
                    open();
                });
            } else {
                open();
            }
        },
        toPath() {
            this.show = false;
            uni.navigateTo({
                url: '/pages/index/index'
            });
        },
        onGetUserInfo(res) {
            if (res.detail.userInfo) {
                uni.reportAnalytics('red_click');
                if (!this.token) {
                    this.take();
                }
            }
        },
        openRedPackage() {
            if (this.token) {
                this.take();
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.popup-rp {
    &--open,
    &--wait {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    &__cover {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
    }

    &__cover-bg {
        display: block;
        height: 648rpx;
        width: 600rpx;
        position: absolute;
        left: 18rpx;
        top: 62rpx;
        z-index: 1;
    }

    &--wait {
        height: 778rpx;
        width: 778rpx;
    }

    &--open {
        height: 688rpx;
        width: 652rpx;
    }

    &__z {
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 350rpx;
        width: 100%;
        z-index: 3;

        text {
            display: inline-block;
            border: 1rpx solid #fff;
            color: #fff;
            border-radius: 14rpx;
            padding: 4rpx 15rpx;
        }
    }

    &__title {
        display: block;
        font-size: 46rpx;
        font-weight: 500;
        position: absolute;
        left: 0;
        top: 100rpx;
        width: 100%;
        text-align: center;
        color: #fff;
        letter-spacing: 1rpx;
    }

    &__price {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 200rpx;
        left: 0;
        width: 100%;
        z-index: 3;

        image {
            height: 60rpx;
            width: 32rpx;
        }

        text {
            font-size: 80rpx;
            color: #fff;
            font-weight: bold;

            &::after {
                content: '元';
                font-size: 28rpx;
                margin-left: 10rpx;
            }
        }
    }

    &__grab {
        position: absolute;
        left: calc(50% - 90rpx);
        bottom: 170rpx;
        z-index: 3;
        background-color: transparent;
        padding: 0;
        margin: 0;
        height: 180rpx;
        width: 180rpx;

        &::after {
            border: 0;
        }

        image {
            display: block;
            height: 180rpx;
            width: 180rpx;
            position: absolute;
            left: 0;
            top: 0;
        }

        &.is-animate {
            animation-delay: 1s;
            animation: heartBeat 1s infinite linear;
        }
    }

    @for $i from 1 through 11 {
        .d-#{$i} {
            opacity: 0;
        }

        .s-#{$i} {
            .d-#{$i} {
                opacity: 1;
                transform: scale(1);
            }
        }
    }

    @keyframes heartBeat {
        0% {
            transform: scale(1);
        }

        14% {
            transform: scale(1.1);
        }

        28% {
            transform: scale(1);
        }

        42% {
            transform: scale(1.1);
        }

        70% {
            transform: scale(1);
        }
    }

    &__date {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 30rpx;
        letter-spacing: 1rpx;
        z-index: 3;
    }

    &__next {
        background-color: transparent;
        position: absolute;
        bottom: 70rpx;
        height: 130rpx;
        width: 440rpx;
        line-height: 96rpx;
        z-index: 3;

        image {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        &::after {
            border: 0;
        }

        text {
            position: relative;
            color: #be2a09;
            font-size: 34rpx;
            font-weight: 500;
        }
    }

    &--open {
        .popup-rp__price {
            top: 240rpx;
            text {
                color: #f53f53;
            }
        }

        .popup-rp__date {
            color: #eee;
        }
    }

    &__light {
        position: absolute;
        left: 60rpx;
        top: -100rpx;
        overflow: hidden;
        height: 500rpx;
        width: 500rpx;
        transform: rotate(45deg);
        z-index: 2;

        image {
            position: absolute;
            top: 50rpx;
            left: 40rpx;
            display: block;
            height: 900rpx;
            width: 900rpx;
            animation: c 8s linear infinite;
        }

        @keyframes c {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(180deg);
            }
        }
    }

    &__small {
        .d1 {
            height: 128rpx;
            width: 102rpx;
            position: absolute;
            left: 100rpx;
            bottom: 240rpx;
            animation: d1 0.3s linear infinite;
        }

        @keyframes d1 {
            0% {
                left: 100rpx;
                bottom: 240rpx;
                opacity: 1;
            }

            100% {
                left: -10rpx;
                bottom: 320rpx;
                opacity: 0.7;
            }
        }

        .d2 {
            height: 64rpx;
            width: 56rpx;
            position: absolute;
            left: 120rpx;
            bottom: 480rpx;
            animation: d2 0.3s linear infinite;
        }

        @keyframes d2 {
            0% {
                left: 120rpx;
                bottom: 480rpx;
                opacity: 1;
            }

            100% {
                left: 30rpx;
                bottom: 550rpx;
                opacity: 0.7;
            }
        }

        .d3 {
            height: 102rpx;
            width: 78rpx;
            position: absolute;
            right: 120rpx;
            bottom: 320rpx;
            animation: d3 0.3s linear infinite;
        }

        @keyframes d3 {
            0% {
                right: 120rpx;
                bottom: 320rpx;
                opacity: 1;
            }

            100% {
                right: 20rpx;
                bottom: 380rpx;
                opacity: 0.7;
            }
        }

        .d4 {
            height: 62rpx;
            width: 56rpx;
            position: absolute;
            right: 110rpx;
            top: 160rpx;
            animation: d4 0.3s linear infinite;
        }

        @keyframes d4 {
            0% {
                right: 110rpx;
                top: 160rpx;
                opacity: 1;
            }

            100% {
                right: 20rpx;
                top: 100rpx;
                opacity: 0.7;
            }
        }
    }
}
</style>
